<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../js/global.js"></script>
		<script src="../js/xm-select.js"></script>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
			<legend>系統功能模块维护</legend>
		</fieldset>
		<!-- 搜索区 -->
		<div id="searchePage" class="layui-form-item" style="margin-top: 10px;margin-left: 10px;">
			<form class="layui-form" method="post" onsubmit="return false;">
				<label class="layui-form-mid">考试名称:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="gexamName" name="examName" autocomplete="off"
						class="layui-input" />
				</div>
				
				<label class="layui-form-mid">考试状态:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select id="gexamStatus"  name="examStatus">
						 <option></option>
						  <option value="0">未进行</option>
						  <option value="1">进行中</option>
						  <option value="2">已结束</option>
					      <option value="3">已取消</option>
					</select>
				</div>
			
				
                
				<div class="layui-input-inline" style="width: 70px;">
					<button class="layui-btn" id="search" data-type="reload">搜索</button>
				</div>
				
			</form>
		</div>
		<!--
			编辑弹层
		-->
		<div id="updatePage" style="display: none;">
			<form class="layui-form" action="" onsubmit="return false" lay-filter="updateForm">
			<div class="layui-form-item" style="margin-top: 30px;">
				<label class="layui-form-label"><span style="color: red;">*</span>考试名称:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="hidden" name="examId" />
					<input type="text" name="examName"
						lay-verify="uname" class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item" style="margin-top: 30px;">
				<label class="layui-form-label"><span style="color: red;">*</span>考试开始时间:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text"  name="examStartTime"
						 class="layui-input examStartTime" />
				</div>
			</div>
			<div class="layui-form-item" style="margin-top: 30px;">
				<label class="layui-form-label"><span style="color: red;">*</span>考试开始时间:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text"  name="examEndTime"
						 class="layui-input examEndTime" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>考试人数:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text"  name="examPeopleNum"
						 class="layui-input " disabled="disabled" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>考试状态:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<select  name="examStatus">
						 <option></option>
						  <option value="0">未进行</option>
						  <option value="1">进行中</option>
						  <option value="2">已结束</option>
					      <option value="3">已取消</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>监考老师:</label>
				<div class="layui-input-inline" style="width: 350px;">
				     <input type="text" id="testP" name="testPaperId" hidden="hidden" />
					 <select class="us" name="invigilateTeacherId">
						 <option></option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>考试类型:</label>
				<div class="layui-input-inline" style="width: 350px;">
					
				    <select class="ex" multiple="true" name="examTypeId">
				    	 <option></option>
				    </select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>班级:</label>
				<div class="layui-input-inline">
					<div id="demo1" style="width: 350px;" disabled="disabled"></div>
				</div>
				
				<!-- 用于存储选择的数据，方便后期进行数据提交操作 -->
				<input type="hidden" id="sclass" name="sclass" >
			</div>
			
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" id="transmit" lay-submit="" lay-filter="updateClass">保存</button>
			</div>
			</form>
		</div>
		<!--
        	数据表格
        -->
	
    <table class="layui-hide" id="class_table" lay-filter="test">
		
	</table>
   <!--行内工具栏-->
   <script type="text/html" id="barDemo">
	  {{#  if(d.examStatus==0){ }}
   	    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">取消考试</a>
	  {{# } else { }}
	    <a class="layui-btn layui-btn-disabled  layui-btn-xs" lay-event="de">取消考试</a>
	  {{# } }}
	  {{#  if(d.examStatus==0||d.examStatus==3){ }}
	    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">编辑</a>
	   {{# } else { }}
	    <a class="layui-btn layui-btn-disabled layui-btn-xs" lay-event="de">编辑</a>
	  {{# } }}
   	    
   </script>
		
       <script type="text/html" id="st">
       	{{# if(d.examStatus==0){ }}
        <span style="color: lightblue;font-weight: bolder;">未进行</span>	 
       	{{# } else if(d.examStatus==1) { }}
        <span style="color: green;font-weight: bolder;">进行中</span>	
		{{# } else if(d.examStatus==3) { }}
		 <span style="color: gray;font-weight: bolder;">已取消</span>	
       	{{# } else { }}
       	 <span style="color: firebrick;font-weight: bolder;">已结束</span>	
       	{{# } }}
       </script> 
</body>
	<script>
			layui.use(['table', 'form', 'layer', 'laydate', 'upload', 'element','xmSelect'],function(){
				var layer = layui.layer;
				var form = layui.form;
				var table = layui.table;
				var laydate = layui.laydate;
				var upload = layui.upload;
				var element = layui.element;
				var xmSelect = layui.xmSelect;
				var $ = layui.$;
				laydate.render({
					elem: '.examStartTime',
					type: 'datetime'
				});
				laydate.render({
					elem: '.examEndTime',
					type: 'datetime'
				})
				//渲染用户表
				$.get(globalData.permissionServer + '/user/listUsers', function(res) {
					var html = "";
					for (var i = 0; i < res.data.length; i++) {
						html += "<option value=" + res.data[i].userId + ">" + res.data[i].userName + "</option>"
				
					}
					$(".us").append(html);
				
					form.render('select')
				}, "json")
				//渲染考试类型表
				$.get(globalData.examinationServer + '/examType/listExamTypes', function(res) {
					var html = "";
					for (var i = 0; i < res.data.length; i++) {
						html += "<option value=" + res.data[i].examTypeId + ">" + res.data[i].examTypeName + "</option>"
				
					}
					$(".ex").append(html);
				
					form.render('select')
				}, "json")
				//渲染数据表格
				table.render({
					elem:'#class_table',
					height:400,
					url:globalData.examinationServer+'/exam/listExams',
					method:"get",
					//headers: {token: globalData.getCurToken()},//设置请求头
					title:"用户表",
					page:true,
					cols:[
							[
							{
								field:'examName',
								title:'考试名称',
								sort:true,
								align:'center'
							},{
								field:'examStartTime',
								title:'考试开始时间',
								sort:true,
								align:'center'
							},{
								field: 'examEndTime',
								title: '考试结束时间',
								sort:true,
								align:'center'
							},{
								field: 'examPeopleNum',
								title: '考试人数',
								sort:true,
								align:'center'
							},{
								field:'effectiveStrength',
								title:'实际参与考试人数',
								sort:true,
								align:'center'
							},{
								field:'examStatus',
								title:'考试状态',
								templet:$("#st"),
								width:120,
								align:'center'
								},{
								field: 'testPaperId',
								title: '试卷',
								templet:'<div>{{testPaper(d.testPaperId)}}</div>'
							},{
								field: 'invigilateTeacherId',
								title: '监考老师',
								templet:'<div>{{invigilateTeacher(d.invigilateTeacherId)}}</div>'
							},{
								field: 'examTypeId',
								title: '考试类型',
								templet:'<div>{{examType(d.examTypeId)}}</div>'
							},{
								title:'操作',
								width:180,
								align:"center",
								toolbar:'#barDemo'
							}
							]
						],
						id:"testReload",
						done:function(res,curr,count){
						
						}
					});
						
						//添加班级弹出层
						$("#addPage").on('click',function(){
							layer.open({
								type:2,
								title:'发布考试',
								area: ['700px', '700px'],
								content:'exam_add.html',
								end:function(){
									//alert(1)
								}
							});
						});
				
				
				active={
					reload:function(){
						var gexamName=$("#gexamName");
						var gexamStatus=$("#gexamStatus");
						
						table.reload('testReload',{
							where:{
								'examName':gexamName.val(),
								'examStatus':gexamStatus.val()
								
								},
							curr:{
								page:1
							}
						});
					}
				};
				
				//查询操作
				$("#search").on('click',function(){
					alert($("#gexamTypeId").val());
					var type=$(this).data('type');
					active[type]?active[type].call(this):'';
				})
				
				
				
//			
	          //行内工具栏监听
				table.on('tool(test)',function(obj){
					var data=obj.data;
					switch(obj.event){
						case 'del':{
						layer.confirm('确认取消考试吗?',{icon:7},function(index){
							layer.close(index);
						   $.ajax({
								type : "delete",
								url : globalData.examinationServer+'/exam/cancelExam',
								data:{
											examId:data.examId
										},//需要传递到服务端的数据
										dataType:'json',//服务端响应数据类型
										xhrFields: {
											withCredentials: true
										},
										// beforeSend: function(request) {
										// 	request.setRequestHeader("token", globalData.getCurToken());
										// },
										success : function(res) {
											if(res.code == 0){
												layer.msg(res.msg,{icon:1,time:2000},function(index){
													table.reload('testReload');
												});
												
											}else{
												layer.msg(res.msg,{icon:2,time:2000});
											}
									}
									});
									
								});
								}
						break;
						case 'update':
						
						var tagIns1;
						   $.ajax({
						         type : "get",
						         url : globalData.organizationServer+'/class/getExamIdlistClass',
								 data:{examId:data.examId},
						//要传递到服务端的数据
								dataType:'json',//服务端响应数据类型
								xhrFields: {
									withCredentials: true
								},
								
						            success : function(res) {
									 
									   tagData1 = res.data; // 
									 console.log(res);
									
									   tagIns1 = xmSelect.render({
									    el: '#demo1', // div的id值
									    toolbar: { // 工具条【‘全选’，‘清空’】
									      show: true, // 开启工具条
									      showIcon: false, // 隐藏工具条的图标
									    },
										
									    // tips: '选择校区', // 让默认值不是“请选择”，而是“选择校区”
									    filterable: true, // 开启搜索模式，默认按照name进行搜索
									    paging: true, // 启用分页
									    pageSize: 3, // 每页的数据个数
										initvalue:[4],
									    data:tagData1 , // 动态传入数据
									    prop: { // 也许你的数据库返回的并不是name和value, 也许你提交的时候不止name和value, 怎么办? 自定义就行
									      name: 'className',
									      value: 'classId',
										  selected :'selected',
										  disabled:'disabled',
									    },
									    
									  })
									  
									  
						
							}
							});
						//表单赋值
						form.val('updateForm',data);
						var update_index=layer.open({
							type:1,
							title:'您正在修改['+data.examName+']的信息',
							area: ['500px', '500px'],
							content: $('#updatePage'),
							success:function(layero,index){
								//修改提交
								form.on('submit(updateClass)',function(obj){
									//console.log(obj.field);
									$.ajax({
										type : "put",
										url : globalData.examinationServer+'/exam/updateExam',
										data:obj.field,//需要传递到服务端的数据
										dataType:'json',//服务端响应数据类型
										xhrFields: {
											withCredentials: true
										},
										// beforeSend: function(request) {
										// 	request.setRequestHeader("token", globalData.getCurToken());
										// },
										success : function(res) {
											if(res.code == 0){
												layer.msg(res.msg,{icon:1,time:2000},function(index){
													layer.close(update_index);
													table.reload('testReload');
												});
												
											}else{
												layer.msg(res.msg,{icon:2,time:2000});
											}
									}
									});
								});
							}
						});
						
						break;
					}
				});
				

			});

				//应用template模板，渲染试卷
				function testPaper(testPaperId){
					
				    var tId = testPaperId;
				    var title;
				    $.ajax({
				        url:globalData.examinationServer + '/testPaper/listTestPapers',//你的后台请求路径
				        dataType:'json',
				        async: false,//同步
				        success:function(data){
							$.each(data.data,function (index,obj) {
									 if(obj.testPaperId==tId){
				                        title=obj.testPaperName;
				                         
				                    }
				                });
				        }
				    });
				    return title;
				};
					//应用template模板，渲染监考老师
				function invigilateTeacher(invigilateTeacherId){
					
				    var iId = invigilateTeacherId;
				    var title;
				    $.ajax({
				        url:globalData.permissionServer + '/user/listUsers',//你的后台请求路径
				        dataType:'json',
				        async: false,//同步
				        success:function(data){
							$.each(data.data,function (index,obj) {
									 if(obj.userId==iId){
				                        title=obj.userName;
				                         
				                    }
				                });
				        }
				    });
				    return title;
				};
					//应用template模板，渲染考试类型
				function examType(examTypeId){
				
				    var eId = examTypeId;
				    var title;
				    $.ajax({
				        url:globalData.examinationServer + '/examType/listExamTypes',//你的后台请求路径
				        dataType:'json',
				        async: false,//同步
				        success:function(data){
							$.each(data.data,function (index,obj) {
									 if(obj.examTypeId==eId){
				                        title=obj.examTypeName;
				                         
				                    }
				                });
				        }
				    });
				    return title;
				};

				

			
		</script>
</html>